<template>
  <div class="manage-page">
    <div class="page-header">
      <el-button class="back-btn" type="primary" @click="goBack" plain round>
        <el-icon><ArrowLeft /></el-icon> 返回
      </el-button>
      <div class="header-center">
        <h2>兴趣社群管理</h2>
        <p>查看和管理所有兴趣社群及其成员</p>
      </div>
    </div>
    <el-table :data="communityList" v-loading="loading" style="width: 100%">
      <el-table-column prop="name" label="社群名称" min-width="180" />
      <el-table-column prop="memberCount" label="成员数" width="100" />
      <el-table-column label="操作" width="320">
        <template #default="scope">
          <el-button size="small" @click="viewMembers(scope.row)">查看成员</el-button>
          <el-button size="small" @click="goToPosts(scope.row)">查看帖子</el-button>
          <el-button size="small" type="danger" @click="deleteCommunity(scope.row)">删除社群</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="memberDialogVisible" title="社群成员" width="500px">
      <el-table :data="memberList" v-loading="memberLoading" style="width: 100%">
        <el-table-column prop="userName" label="成员姓名" min-width="120" />
        <el-table-column prop="userRole" label="角色" width="100" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" type="danger" @click="removeMember(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog v-model="postDialogVisible" title="社群帖子" width="800px">
      <el-table :data="postList" v-loading="postLoading" style="width: 100%">
        <el-table-column prop="title" label="标题" min-width="180" />
        <el-table-column prop="authorName" label="作者" width="120" />
        <el-table-column prop="createTime" label="发布时间" width="180" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" type="danger" @click="deletePost(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { interestCommunityApi, communityPostApi } from '@/api/social'
import { useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
const router = useRouter()
const goBack = () => {
  router.push('/social')
}

const communityList = ref([])
const loading = ref(false)
const memberDialogVisible = ref(false)
const memberList = ref([])
const memberLoading = ref(false)
const currentCommunity = ref(null)

const postDialogVisible = ref(false)
const postList = ref([])
const postLoading = ref(false)
const currentPostCommunity = ref(null)

const fetchCommunities = async () => {
  loading.value = true
  try {
    const res = await interestCommunityApi.getAllCommunities()
    if (res.code === 200 && res.data) {
      communityList.value = res.data
    }
  } finally {
    loading.value = false
  }
}

const viewMembers = async (community) => {
  currentCommunity.value = community
  memberDialogVisible.value = true
  memberLoading.value = true
  try {
    const res = await interestCommunityApi.getCommunityMembers(community.id || community.communityId)
    if (res.code === 200 && res.data) {
      memberList.value = res.data
    }
  } finally {
    memberLoading.value = false
  }
}

const viewPosts = async (community) => {
  currentPostCommunity.value = community
  postDialogVisible.value = true
  postLoading.value = true
  try {
    const res = await communityPostApi.getCommunityPosts(community.id || community.communityId)
    if (res.code === 200 && res.data) {
      postList.value = res.data
    }
  } finally {
    postLoading.value = false
  }
}

const goToPosts = (community) => {
  router.push({ name: 'CommunityPosts', params: { communityId: community.id || community.communityId }, query: { admin: 1 } })
}

const removeMember = async (member) => {
  if (!currentCommunity.value) return
  try {
    await ElMessageBox.confirm(`确定要删除成员“${member.userName}”吗？`, '提示', { type: 'warning' })
    const res = await interestCommunityApi.removeCommunityMember(currentCommunity.value.id || currentCommunity.value.communityId, member.userId)
    if (res.code === 200) {
      ElMessage.success('删除成功')
      viewMembers(currentCommunity.value)
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  } catch (e) {
    // 用户取消
  }
}

const deleteCommunity = async (community) => {
  try {
    await ElMessageBox.confirm(`确定要删除社群“${community.name}”吗？`, '提示', { type: 'warning' })
    const res = await interestCommunityApi.deleteCommunity(community.id || community.communityId)
    if (res.code === 200) {
      ElMessage.success('删除成功')
      fetchCommunities()
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  } catch (e) {
    // 用户取消
  }
}

const deletePost = async (post) => {
  if (!currentPostCommunity.value) return
  try {
    await ElMessageBox.confirm(`确定要删除帖子“${post.title}”吗？`, '提示', { type: 'warning' })
    const res = await communityPostApi.deletePost(post.id)
    if (res.code === 200) {
      ElMessage.success('删除成功')
      viewPosts(currentPostCommunity.value)
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  } catch (e) {
    // 用户取消
  }
}

onMounted(() => {
  fetchCommunities()
})
</script>

<style scoped>
.manage-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 24px;
  position: relative;
  min-height: 64px;
}
.page-header h2 {
  color: #409EFF;
  margin-bottom: 8px;
}
.page-header p {
  color: #606266;
  font-size: 15px;
}
.back-btn {
  margin-right: 32px;
}
.header-center {
  flex: 1;
  text-align: center;
}
.header-center h2 {
  color: #409EFF;
  margin-bottom: 8px;
}
.header-center p {
  color: #606266;
  font-size: 15px;
}
</style> 